@red: #e93030;
@green: #009900;
@blue: #4691ee;
@orange: #ff801a;

.set_px(@css_name, @px_num, @dpr: 4) when (@dpr > 0) {
  .set_px(@css_name, @px_num, (@dpr - 1));

  [data-dpr="@{dpr}"] & {
    @{css_name}: unit(@dpr* @px_num, px);
  }
}

// 加粗
.bold {
  font-weight: 700;
}

// 升
.rise {
  color: @red  !important;
}

// 降
.drop {
  color: @green  !important;
}

//上三角形
.triangleUp(@w: 4, @color: @cgray) {
  display: block;
  width: 0;
  height: 0;
  border-top-width: 0;
  .set_px(border-left-width, @w);
  .set_px(border-right-width, @w);
  .set_px(border-bottom-width, @w);
  border-style: solid;
  border-color: transparent transparent @color;
}

//旋转
.rotate(@angle) {
  transform: rotate(@angle);
  -webkit-transform: rotate(@angle);
}

//下三角形
.triangleDown(@w: 4, @color: @cgray) {
  .triangleUp(@w, @color: @cgray);
  .rotate(180deg);
}

.triangleLeft(@w: 4, @color: @cgray) {
  .triangleUp(@w, @color: @cgray);
  .rotate(-90deg);
}

.triangleRight(@w: 4, @color: @cgray) {
  .triangleUp(@w, @color: @cgray);
  .rotate(90deg);
}

// 设置图片背景
.bgimg(@url) {
  background: url(@url) no-repeat;
  background-size: 100% 100%;
}

// 根据位置设置图片背景
.bgimgpos(@width, @height, @url, @left, @top) {
  display: block;
  width: @width;
  height: @height;
  background: url(@url) @left @top;
  background-size: 100% 100%;
}